<template>
  <div class="main">

    <div class="main_title clearfix">
      <div class="fl">
        <span class="selectType" @click="open" v-if="selectValue">
          {{selectValue}}
        </span>
      </div>
      <div class="fr">
        <span>
          左右滑动查看更多》
        </span>
      </div>

    </div>
    <swiper ref="mySwiper" :options="swiperOptions" class="examlist_swiper">
      <swiper-slide v-for="item in list" :key="item.id">
        <div @click="examDetails(item)">
          <img :src="item.themeUrl" alt="">
          <div class="examName">
            <p class="name">{{item.theme}}</p>
            <a class="more">点击查看</a>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <el-dialog class="chooseType" title="为了可以给您提供精准的模拟考试服务，请选择您的从业领域信息：" :visible.sync="dialogFormVisible">
      <typeSelect :type-list="typeList" :firstName="firstTypeName" :secondName="secondTypeName" :second_list="second_list" @receivefirst="getfirstType" @receivesecond="getsecondType"></typeSelect>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" class="cancle">暂不选择</el-button>
        <el-button type="primary" @click="confirm">确认选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style >
</style>
<script>
import path from '@/network'
import API from '@/api.js'
import typeSelect from '../components/typeSelect.vue'
export default {
  name: 'App',
  components: {
    // bgmusic,
    typeSelect
  },
  data () {
    return {
      isPlay: true,
      total: 0,
      pagesize: 50,
      currentPage: 1,
      list: [],
      selectValue: '',
      dialogFormVisible: false,
      typeList: [],
      second_list: [],
      secondTypeId: '',
      firstTypeName: '请选择',
      secondTypeName: '请选择',
      swiperOptions: {
        slidesPerView: 3,//显示个数
        direction: 'row',
        pagination: {
          el: '.swiper-pagination'
        },
      },
      lastType: '',
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted () {
    this.lastType = sessionStorage.getItem('lastType')
    if (this.lastType) {
      this.getExamlist(this.lastType)
      this.dialogFormVisible = false
      this.selectValue = sessionStorage.getItem('selectValue')
    } else {
      this.dialogFormVisible = true
    }
    this.getField();
  },
  methods: {
    handleOpen () {
      this.$Music({})
    },


    getfirstType (item) {
      if (item) {
        this.second_list = item.l2s;
        this.firstTypeName = item.fieldName
      }
    },
    getsecondType (item) {
      if (item) {
        this.secondTypeName = item.fieldName
        this.secondTypeId = item.id
      }
    },
    changeVal (value) {
      this.selectVal = value
    },
    //获取list
    getField () {
      path.getField().then(res => {
        if (res.success === 0) {
          this.typeList = res.rows;
        }
      })
    },
    //获取list
    getExamlist (id) {
      path.getExamlist(
        this.currentPage,
        this.pagesize,
        id
      ).then(res => {
        if (res.success === 0) {
          this.list = res.rows;
        }

      })
    },
    examDetails: function (item) {
      sessionStorage.setItem('examInfo', JSON.stringify(item))
      this.$router.push({ name: 'examInfo', query: { id: item.id, } })
    },


    confirm () {
      if (this.secondTypeId == '') {
        this.$message({
          message: '请先选择单位',
          type: 'warning'
        });
        return
      }

      sessionStorage.setItem('lastType', this.secondTypeId)

      this.getExamlist(this.secondTypeId)
      this.dialogFormVisible = false
      this.selectValue = this.firstTypeName + '-' + this.secondTypeName
      sessionStorage.setItem('selectValue', this.selectValue)
    },

    open () {
      this.dialogFormVisible = true
    }

  }
}



</script>